<template>
  <el-dialog
    title="申请处理"
    :visible.sync="visiable"
    :close-on-click-modal="false"
    width="500px"
  >
    <div class="complain">
      <DetailItem labelWidth="100px" label="申报时间：" :value="detail.createTime" />
      <DetailItem labelWidth="100px" label="申报类别：" :value="APPLY_TYPE_MAP[detail.type]" />
      <DetailItem labelWidth="100px" label="申报企业：" :value="detail.deptName" />
      <DetailItem labelWidth="100px" label="申报理由：" :value="detail.reason" />
      <DetailItem
        v-if="isDetail"
        labelWidth="100px"
        label="处理结果："
        :value="AUDIT_MAP[detail.status]"
      />
      <DetailItem
        v-if="isDetail"
        labelWidth="100px"
        label="处理理由："
        :value="detail.result"
      />
      <el-form
        v-else
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="处理结果：" prop="status">
          <el-radio v-model="form.status" label="done">同意</el-radio>
          <el-radio v-model="form.status" label="failed">不同意</el-radio>
        </el-form-item>
        <el-form-item label="理由：" prop="result">
          <el-input
            v-model="form.result"
            type="textarea"
            class="inp-full"
            :maxlength="300"
            show-word-limit
            placeholder="请输入理由"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button v-if="!isDetail" size="big" type="primary" @click="submit">提交</el-button>
      <el-button size="big" @click="visiable = false">返回</el-button>
    </span>
  </el-dialog>
</template>

<script>
import DetailItem from '../Detail/DetailItem.vue'
import { AUDIT_MAP, APPLY_TYPE_MAP } from '@/assets/js/enum'
import * as QRCodeApplyAction from '@/api/qrcodeApply'

export default {
  components: {
    DetailItem
  },
  data () {
    return {
      visiable: false,
      currentId: null,
      model: null,
      form: {},
      APPLY_TYPE_MAP,
      AUDIT_MAP,
      rules: {
        status: [{ required: true, message: '请输入反馈结果', trigger: 'change' }],
        result: [{ required: true, message: '请输入反馈结果', trigger: 'change' }],
        reason: [{ required: true, message: '请输入反馈结果', trigger: 'change' }],
      },
      detail: {},
      operation: ''
    }
  },
  computed: {
    isDetail () {
      return this.operation === 'detail'
    }
  },
  methods: {
    show (id, operation) {
      this.visiable = true
      this.getDetail(id)
      this.currentId = id
      this.operation = operation === 'handle' ? operation : 'detail'
    },
    async getDetail (id) {
      const res = await QRCodeApplyAction.select({ id })
      if (res) {
        this.detail = res
      }
    },
    submit () {
      this.$refs.form.validate(async valid => {
        if (!valid) return false
        const param = {
          ...this.form,
          id: this.currentId,
          type: this.form.status === 'done' ? 'off' : 'on'
        }
        const res = await QRCodeApplyAction.audit(param)
        if (res) {
          this.$message.success('提交成功！')
          this.visiable = false
          this.$emit('reload')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.complain {
  .model-select {
    display: flex;
    justify-content: space-between;
  }

  ::v-deep .el-form-item__label {
    padding-right: 0;
    color: #303133;
  }
}
</style>
